<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运单查询</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">运单全生命周期查询</div>
            
            <!-- 查询条件 -->
            <div class="query-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input v-model="queryForm.waybillNo" placeholder="运单号" clearable></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="queryForm.customerName" placeholder="客户名称" clearable></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.status" placeholder="运单状态" clearable>
                            <el-option label="待审核" value="pending"></el-option>
                            <el-option label="已接单" value="accepted"></el-option>
                            <el-option label="运输中" value="transporting"></el-option>
                            <el-option label="已送达" value="delivered"></el-option>
                            <el-option label="已完成" value="completed"></el-option>
                            <el-option label="已取消" value="cancelled"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker
                            v-model="queryForm.dateRange"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px;">
                    <el-col :span="6">
                        <el-select v-model="queryForm.routeType" placeholder="路线类型" clearable>
                            <el-option label="市内配送" value="local"></el-option>
                            <el-option label="省内运输" value="provincial"></el-option>
                            <el-option label="跨省运输" value="interprovincial"></el-option>
                            <el-option label="国际运输" value="international"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.cargoType" placeholder="货物类型" clearable>
                            <el-option label="衡阳湘莲" value="lotus"></el-option>
                            <el-option label="祁东黄花菜" value="daylily"></el-option>
                            <el-option label="南岳茶油" value="tea_oil"></el-option>
                            <el-option label="衡阳土鸡蛋" value="eggs"></el-option>
                            <el-option label="其他特产" value="other"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchWaybills">查询</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                        <el-button type="success" @click="exportData">导出</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 运单列表 -->
            <div class="waybill-list">
                <el-table :data="waybillData" border style="width: 100%">
                    <el-table-column prop="waybillNo" label="运单号" width="140"></el-table-column>
                    <el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
                    <el-table-column prop="route" label="运输路线" width="200"></el-table-column>
                    <el-table-column prop="cargoInfo" label="货物信息" width="180"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                    <el-table-column prop="status" label="当前状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="progress" label="进度" width="120">
                        <template slot-scope="scope">
                            <el-progress :percentage="scope.row.progress" :show-text="true"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="viewLifecycle(scope.row)">生命周期</el-button>
                            <el-button size="mini" type="primary" @click="trackWaybill(scope.row)">实时跟踪</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 生命周期详情对话框 -->
        <el-dialog title="运单生命周期" :visible.sync="lifecycleDialogVisible" width="70%">
            <div v-if="selectedWaybill">
                <div class="lifecycle-header">
                    <h3>{{ selectedWaybill.waybillNo }} - {{ selectedWaybill.customerName }}</h3>
                    <p>{{ selectedWaybill.route }} | {{ selectedWaybill.cargoInfo }}</p>
                </div>
                
                <el-timeline>
                    <el-timeline-item
                        v-for="event in selectedWaybill.lifecycle"
                        :key="event.id"
                        :timestamp="event.timestamp"
                        :color="event.color"
                        :icon="event.icon">
                        <el-card>
                            <h4>{{ event.title }}</h4>
                            <p>{{ event.description }}</p>
                            <p v-if="event.location"><strong>位置：</strong>{{ event.location }}</p>
                            <p v-if="event.operator"><strong>操作人：</strong>{{ event.operator }}</p>
                            <p v-if="event.remark"><strong>备注：</strong>{{ event.remark }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <span slot="footer">
                <el-button @click="lifecycleDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="printLifecycle">打印</el-button>
            </span>
        </el-dialog>

        <!-- 实时跟踪对话框 -->
        <el-dialog title="实时跟踪" :visible.sync="trackDialogVisible" width="80%">
            <div v-if="trackingData">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="map-container">
                            <div id="trackingMap" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;">
                                <span style="color: #999;">实时位置地图 (集成百度/高德地图)</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tracking-info">
                            <h4>实时信息</h4>
                            <p><strong>当前位置：</strong>{{ trackingData.currentLocation }}</p>
                            <p><strong>行驶速度：</strong>{{ trackingData.speed }}km/h</p>
                            <p><strong>预计到达：</strong>{{ trackingData.estimatedArrival }}</p>
                            <p><strong>已行驶：</strong>{{ trackingData.distance }}km</p>
                            
                            <h4>车辆状态</h4>
                            <p><strong>车牌号：</strong>{{ trackingData.vehicleNo }}</p>
                            <p><strong>司机：</strong>{{ trackingData.driver }}</p>
                            <p><strong>联系电话：</strong>{{ trackingData.phone }}</p>
                            
                            <h4>货物状态</h4>
                            <p><strong>温度：</strong>{{ trackingData.temperature }}°C</p>
                            <p><strong>湿度：</strong>{{ trackingData.humidity }}%</p>
                            <p><strong>制冷状态：</strong>{{ trackingData.refrigerationStatus }}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer">
                <el-button @click="trackDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="refreshTracking">刷新位置</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    queryForm: {
                        waybillNo: '',
                        customerName: '',
                        status: '',
                        dateRange: [],
                        routeType: '',
                        cargoType: ''
                    },
                    waybillData: [
                        {
                            waybillNo: 'WB-HY202401001',
                            customerName: '衡阳湘莲合作社',
                            route: '衡阳→长沙',
                            cargoInfo: '衡阳湘莲 8吨',
                            createTime: '2024-01-15 08:00',
                            status: 'transporting',
                            progress: 65,
                            lifecycle: [
                                {
                                    id: 1,
                                    timestamp: '2024-01-15 08:00',
                                    title: '运单创建',
                                    description: '衡阳湘莲合作社提交运单申请',
                                    location: '衡阳市蒸湘区',
                                    operator: '客户服务部',
                                    color: '#909399',
                                    icon: 'el-icon-plus'
                                },
                                {
                                    id: 2,
                                    timestamp: '2024-01-15 09:30',
                                    title: '运单审核通过',
                                    description: '审核湘莲产品合规性和运输要求',
                                    location: '衡阳雁农总部',
                                    operator: '审核专员李师傅',
                                    color: '#67C23A',
                                    icon: 'el-icon-check'
                                },
                                {
                                    id: 3,
                                    timestamp: '2024-01-15 10:15',
                                    title: '分配运输车辆',
                                    description: '安排湘莲专用冷藏车辆和司机',
                                    location: '衡阳雁农配送中心',
                                    operator: '调度员张师傅',
                                    remark: '车牌号：湘D·A8888',
                                    color: '#409EFF',
                                    icon: 'el-icon-truck'
                                },
                                {
                                    id: 4,
                                    timestamp: '2024-01-15 14:30',
                                    title: '湘莲装载完成',
                                    description: '湘莲产品检查并装车完毕，温度设定2-4℃',
                                    location: '衡阳市蒸湘区湘莲种植基地',
                                    operator: '司机刘师傅',
                                    color: '#E6A23C',
                                    icon: 'el-icon-box'
                                },
                                {
                                    id: 5,
                                    timestamp: '2024-01-15 15:00',
                                    title: '开始运输',
                                    description: '湘莲专用冷藏车出发前往长沙',
                                    location: '京港澳高速衡阳入口',
                                    operator: '司机刘师傅',
                                    color: '#409EFF',
                                    icon: 'el-icon-position'
                                }
                            ]
                        },
                        {
                            waybillNo: 'WB-HY202401002',
                            customerName: '衡阳祁东黄花菜专业合作社',
                            route: '衡阳祁东→衡阳市区',
                            cargoInfo: '祁东黄花菜 5吨',
                            createTime: '2024-01-14 15:30',
                            status: 'completed',
                            progress: 100,
                            lifecycle: [
                                {
                                    id: 1,
                                    timestamp: '2024-01-14 15:30',
                                    title: '运单创建',
                                    description: '祁东黄花菜专业合作社提交运单申请',
                                    location: '衡阳市祁东县',
                                    operator: '客户服务部',
                                    color: '#909399',
                                    icon: 'el-icon-plus'
                                },
                                {
                                    id: 2,
                                    timestamp: '2024-01-14 16:00',
                                    title: '黄花菜装载',
                                    description: '黄花菜干制品装车，确保干燥环境',
                                    location: '祁东县黄花菜产业园',
                                    operator: '司机王师傅',
                                    color: '#E6A23C',
                                    icon: 'el-icon-box'
                                },
                                {
                                    id: 3,
                                    timestamp: '2024-01-14 18:00',
                                    title: '货物送达',
                                    description: '黄花菜已安全送达衡阳市区仓库',
                                    location: '衡阳市珠晖区雁农特产仓库',
                                    operator: '司机王师傅',
                                    color: '#67C23A',
                                    icon: 'el-icon-circle-check'
                                }
                            ]
                        },
                        {
                            waybillNo: 'WB-HY202401003',
                            customerName: '衡阳南岳茶油加工厂',
                            route: '衡阳南岳→武汉',
                            cargoInfo: '南岳茶油 12吨',
                            createTime: '2024-01-16 09:00',
                            status: 'accepted',
                            progress: 20,
                            lifecycle: [
                                {
                                    id: 1,
                                    timestamp: '2024-01-16 09:00',
                                    title: '运单创建',
                                    description: '南岳茶油加工厂提交跨省运输申请',
                                    location: '衡阳市南岳区',
                                    operator: '客户服务部',
                                    color: '#909399',
                                    icon: 'el-icon-plus'
                                },
                                {
                                    id: 2,
                                    timestamp: '2024-01-16 10:30',
                                    title: '运单审核通过',
                                    description: '审核茶油产品质量证书和运输要求',
                                    location: '衡阳雁农总部',
                                    operator: '审核专员陈师傅',
                                    color: '#67C23A',
                                    icon: 'el-icon-check'
                                }
                            ]
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 3,
                    lifecycleDialogVisible: false,
                    trackDialogVisible: false,
                    selectedWaybill: null,
                    trackingData: {
                        currentLocation: '京港澳高速衡阳段',
                        speed: 75,
                        estimatedArrival: '2024-01-16 08:30',
                        distance: 85,
                        vehicleNo: '湘D·A8888',
                        driver: '刘师傅',
                        phone: '138****1234',
                        temperature: 3,
                        humidity: 50,
                        refrigerationStatus: '正常制冷'
                    }
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        'pending': 'info',
                        'accepted': 'warning',
                        'transporting': 'primary',
                        'delivered': 'success',
                        'completed': 'success',
                        'cancelled': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'pending': '待审核',
                        'accepted': '已接单',
                        'transporting': '运输中',
                        'delivered': '已送达',
                        'completed': '已完成',
                        'cancelled': '已取消'
                    };
                    return textMap[status] || '未知';
                },
                searchWaybills() {
                    this.$message.success('查询完成');
                },
                resetQuery() {
                    this.queryForm = {
                        waybillNo: '',
                        customerName: '',
                        status: '',
                        dateRange: [],
                        routeType: '',
                        cargoType: ''
                    };
                },
                exportData() {
                    this.$message.success('数据导出成功');
                },
                viewLifecycle(row) {
                    this.selectedWaybill = row;
                    this.lifecycleDialogVisible = true;
                },
                trackWaybill(row) {
                    this.selectedWaybill = row;
                    this.trackDialogVisible = true;
                },
                printLifecycle() {
                    this.$message.success('生命周期报告打印成功');
                },
                refreshTracking() {
                    this.$message.success('位置信息已刷新');
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>

    <style scoped>
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .waybill-list {
            margin-bottom: 20px;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
        
        .lifecycle-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #409EFF;
        }
        
        .lifecycle-header h3 {
            color: #409EFF;
            margin-bottom: 5px;
        }
        
        .lifecycle-header p {
            color: #666;
            margin: 0;
        }
        
        .map-container {
            border-radius: 4px;
            overflow: hidden;
        }
        
        .tracking-info {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 4px;
            height: 400px;
            overflow-y: auto;
        }
        
        .tracking-info h4 {
            color: #409EFF;
            margin-bottom: 15px;
            border-bottom: 1px solid #409EFF;
            padding-bottom: 5px;
        }
        
        .tracking-info p {
            margin: 8px 0;
            line-height: 1.6;
        }
    </style>
</body>
</html>